<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        .app-inner {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
        
        .loadEffect {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            top: 50%;
            /*偏移*/
            transform: translateY(-50%);
        }
        
        .loadEffect span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(204, 204, 204, .3);
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        
        @-webkit-keyframes load {
            0% {
                -webkit-transform: scale(1.2);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(.3);
                opacity: 0.5;
            }
        }
        
        .loadEffect span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -10px;
            -webkit-animation-delay: 0.13s;
        }
        
        .loadEffect span:nth-child(2) {
            left: 14px;
            top: 14px;
            -webkit-animation-delay: 0.26s;
        }
        
        .loadEffect span:nth-child(3) {
            left: 50%;
            top: 0;
            margin-left: -10px;
            -webkit-animation-delay: 0.39s;
        }
        
        .loadEffect span:nth-child(4) {
            top: 14px;
            right: 14px;
            -webkit-animation-delay: 0.52s;
        }
        
        .loadEffect span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -10px;
            -webkit-animation-delay: 0.65s;
        }
        
        .loadEffect span:nth-child(6) {
            right: 14px;
            bottom: 14px;
            -webkit-animation-delay: 0.78s;
        }
        
        .loadEffect span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -10px;
            -webkit-animation-delay: 0.91s;
        }
        
        .loadEffect span:nth-child(8) {
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay: 1.04s;
        }
        
        .circular {
            display: none;
        }
    </style>
    <script src="./jquery-3.5.1.min.js"></script>
</head>

<body id="page-main">
    <noscript>
      <strong>We're sorry but new-mobile doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
</body>


</html>